<template>
  <div class="order-body">
    <!-- header -->
    <shop-header>{{ date }} 团队积分记录</shop-header>

    <div class="user-list">
      <ul>
        <li>
          <div class="user-list-cell" style="font-weight: bold;">
            <div class="type-detail">团队成员</div>
            <div class="type-desc">盒数</div>
            <div class="money">积分</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="user-list">
      <ul>
        <li v-for="(item, key) in dataInfo" :key="key">
          <div class="user-list-cell">
            <div class="type-detail">{{ item.rewardMemberName }}</div>
            <div class="type-desc">{{ item.rewardProductCount }}</div>
            <div class="money">{{ item.rewardAmount }}</div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import Header from '../components/header';
import {Indicator} from "mint-ui";
import request from "../utils/request";

export default {
  components: {
    shopHeader: Header,
  },
  data() {
    return {
      date: '',
      dataInfo: [
        {
          rewardMemberName: '',
          rewardProductCount: 0,
          rewardAmount: 0,
        },
      ],

    }
  },
  async created() {
    this.date = this.$route.query.date;
    Indicator.open();
    const res = await request({date: this.date}, "/ajax/member/dailyDetail");
    if(res && res.code == 0){
      Indicator.close();
      this.dataInfo = res.data;
    }
  },
  methods: {
  },
}
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
.order-body {
  min-height: 100vh;
  background-color: #F3F3F3;
  padding-bottom: 50px;
}
.order-tabs {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 48px;
  background-color: #fff;
  width: 100%;
}
.order-tabs > ul {
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  overflow: auto;
}
.order-tabs > ul > li {
  list-style: none;
  flex: 1;
  padding: 10px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.order-tabs > ul > li.is-tabs-active {
  color: #F49D4D;
}
.order-tabs > ul > li.is-tabs-active > .order-tabs-line{
  width: 20%;
  height: 2px;
  background-color: #F49D4D;
  margin-top: 5px;
}

.user-list {
  background-color: #fff;
  font-size: 14px;
}

.user-list > ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid #D9D9D9;
}

.user-list > ul > li {
  list-style: none;
  text-align: left;
  font-size: 14px;
  justify-content: flex-end;
  border-bottom: 1px solid #D9D9D9;
}
.user-list-cell {
  width: 100%;
  padding: 10px 0;
  align-items: center;
  text-align: center;
}

.user-list > ul > li:last-child > .user-list-cell {
  border: 0;
}

.user-list-cell .type-detail {
  width: 50%;
  display: inline-block;
}
.user-list-cell .type-desc {
  width: 25%;
  display: inline-block;
}
.user-list-cell .money {
  width: 18%;
  display: inline-block;
}

</style>
